<template>
    <div class="dir-top-nowrap gap index-user-info">
        <template v-if="!userStore.isLogin">
            <div>
                <NuxtLink to="/login">登录</NuxtLink>
            </div>
        </template>
        <template v-else>
            <div class="dir-left-nowrap cross-center gap info-box">
                <div class="box-grow-1 dir-left-nowrap cross-center" style="gap: 15px;">
                    <div class="box-grow-0">
                        <NuxtLink :to="`/user/${userStore.uid}`">
                            <AppAvatar src="http://www.ay1.cc/img?w=70&h=70" size="70" round></AppAvatar>
                        </NuxtLink>
                    </div>
                    <div class="box-grow-1 dir-top-nowrap info">
                        <div class="dir-left-nowrap cross-center" style="gap: 5px;">
                            <NuxtLink :to="`/user/${userStore.uid}`" class="t-omit name">昵称</NuxtLink>
                            <img v-if="userStore.sex === 1" class="box-grow-0  icon-sex" src="/imgs/index/sex_man.png">
                            <img v-else-if="userStore.sex == 2" class="box-grow-0  icon-sex" src="/imgs/index/sex_girl.png">
                        </div>
                        <div class="dir-left-nowrap cross-center">
                            <div class="box-grow-1 t-omit-two introduce">coser</div>
                        </div>
                    </div>
                </div>
                <div class="box-grow-0">
                    <div class="dir-left-nowrap main-center cross-center interest" style="gap: 5px">
                        <AppIcon icon="Add" size="16"> </AppIcon>
                        <div>关注</div>
                    </div>
                </div>
            </div>
            <div class="dir-left-nowrap main-between cross-center user-data-box">
                <div class="dir-top-nowrap item">
                    <div class="dir-top-nowrap cross-center" style="gap: 4px;">
                        <div class="num">202w</div>
                        <div class="text">关注</div>
                    </div>
                </div>
                <div class="dir-top-nowrap item">
                    <div class="dir-top-nowrap cross-center" style="gap: 4px;">
                        <div class="num">30.2w</div>
                        <div class="text">粉丝</div>
                    </div>
                </div>
                <div class="dir-top-nowrap item">
                    <div class="dir-top-nowrap cross-center" style="gap: 4px;">
                        <div class="num">202w</div>
                        <div class="text">收藏</div>
                    </div>
                </div>
            </div>
            <div class="dir-left-nowrap main-between cross-center user-more-box">
                <div class="dir-top-nowrap item" v-for="menu in menus" :key="menu.urlName">
                    <NuxtLink :to="{ name: menu.urlName, params: { uid: userStore.uid } }"
                        class="dir-top-nowrap cross-center" style="gap: 4px;">
                        <img class="icon" :src="menu.icon">
                        <div class="text">{{ menu.title }}</div>
                    </NuxtLink>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts" name="IndexUserInfo">
import { AppAvatar, AppIcon, NuxtLink } from "#components";
import { useUserStore } from "~/stores";
// import { UserSex } from "@/type";

const userStore = useUserStore()

const menus = [
    {
        title: '个人主页',
        icon: '/imgs/index/user_home.png',
        urlName: 'user-userId',
    },
    {
        title: '收藏',
        icon: '/imgs/index/user_love.png',
        urlName: 'user-userId-favlist',
    },
    {
        title: '作品',
        icon: '/imgs/index/user_opus.png',
        urlName: 'user-userId-article-cos',
    }
]

</script>

<style lang='scss' scoped>
.index-user-info {
    position: relative;
    width: 440px;
    background: linear-gradient(221deg, #FFECF2 0%, #FFFFFF 100%);
    border-radius: 10px;
    overflow: hidden;
    padding: 30px 45px;

    &::before {
        content: '';
        position: absolute;
        top: -27px;
        right: -52px;
        width: 120px;
        height: 151px;
        border-radius: 30px;
        opacity: 0.45;
        border: 7px solid #fff;
        transform: rotate(45deg);
    }

    .info-box {
        position: relative;

        .info {
            gap: 5px;
        }

        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
        }

        .name {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
        }

        .icon-sex {
            width: 20px;
            height: 20px;
        }

        .introduce {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
        }

        .interest {
            cursor: pointer;
            position: relative;
            width: 74px;
            height: 34px;
            background-color: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #F9688F;
            font-size: 14px;
            font-weight: 400;
            color: #F9688F;
            transition: background-color .3s;

            &:hover {
                background: #F9688F;
                color: #fff;
            }
        }
    }

    .user-data-box {
        position: relative;
        padding: 0 10px;

        .item {
            cursor: pointer;

            .num {
                font-size: 20px;
                font-weight: 600;
                color: #333333;
            }

            .text {
                font-size: 12px;
                font-weight: 400;
                color: #777777;
            }
        }
    }

    .user-more-box {
        position: relative;
        padding: 0 10px;

        .item {
            cursor: pointer;

            .icon {
                width: 44px;
                height: 44px;
            }

            .text {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
            }
        }
    }
}
</style>